import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import cssModules from 'react-css-modules';
import {Button, List, Row, message, Icon, Form, Select, Input} from 'antd';
import {PageHeader} from 'ant-design-pro';
import {updatePwd} from 'util/api';
import loginUtil from 'util/login';

import LoginComponents from '../Login/components/Login';

const {UserName, Password, Submit} = LoginComponents;
import styles from './style.less';

@inject('OpeningRecordStore')
@observer
@cssModules(styles)
class SearchList extends Component {
  constructor(props) {
    super(props);

    this.store = this.props.OpeningRecordStore;
  }

  state = {
    confirmDirty: false,
  };
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll(async (err, values) => {
      if (!err) {
        const res = await updatePwd({
          accountId: JSON.parse(localStorage.getItem('user_info')).accountId,
          oldPassword: values['old-password'],
          newPassword: values.password,
        });
        if (res.result === 'success') {
          loginUtil.saveUserInfo(res.data);
          message.success('修改成功');
          this.props.form.resetFields();
        } else {
          message.error(res.msg);
        }
      }
    });
  };

  validateToNextPassword = (rule, value, callback) => {
    const {form} = this.props;
    if (value && this.state.confirmDirty) {
      form.validateFields(['confirm'], {force: true});
    }
    callback();
  };
  compareToFirstPassword = (rule, value, callback) => {
    const {form} = this.props;
    if (value && value !== form.getFieldValue('password')) {
      callback('您输入的两个密码不一致!');
    } else {
      callback();
    }
  };
  handleConfirmBlur = e => {
    const {value} = e.target;
    this.setState({confirmDirty: this.state.confirmDirty || !!value});
  };

  render() {
    const {tableData, loading} = this.store;
    const {getFieldDecorator} = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 6},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 18},
      },
    };
    return (
      <div styleName={'wrap'}>
        <div styleName={'container'}>
          <div styleName={'title'}>修改登录密码</div>
          <Form {...formItemLayout}>
            <Form.Item label="原密码">
              {getFieldDecorator('old-password', {
                rules: [
                  {
                    required: true,
                    message: '请输入密码',
                  },
                ],
              })(<Input.Password placeholder={'请输入登录密码'} />)}
            </Form.Item>
            <Form.Item label="新密码" hasFeedback>
              {getFieldDecorator('password', {
                rules: [
                  {
                    required: true,
                    message: '请输入密码!',
                  },
                  {
                    validator: this.validateToNextPassword,
                  },
                ],
              })(<Input.Password placeholder={'请输入新密码'} />)}
            </Form.Item>
            <Form.Item label="确认密码" hasFeedback>
              {getFieldDecorator('confirm', {
                rules: [
                  {
                    required: true,
                    message: '请输入密码!',
                  },
                  {
                    validator: this.compareToFirstPassword,
                  },
                ],
              })(
                <Input.Password
                  placeholder={'请再次输入新密码'}
                  onBlur={this.handleConfirmBlur}
                />,
              )}
            </Form.Item>
            <Form.Item className={styles['submit']}>
              <Button type="primary" onClick={this.handleSubmit}>
                修改密码
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}
const WrappedSearchList = Form.create({name: 'changepassword'})(SearchList);
export default WrappedSearchList;
